<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:comp="http://java.sun.com/jsf/composite/components" >

<ui:composition template="/WEB-INF/templates/master.xhtml">
	<ui:define name="content">
	
	<style>
   #main-content{
  /* margin-left:-100px;*/
   background-image:url("../resources/images/bg.png");;
   min-height:550px;
   overflow: scroll;
   width: 100%;
   }
   #status.ui-dialog .ui-dialog-titlebar{
   display: none !important;
   }
   #status.ui-dialog {
   background: inherit;
   }
   </style>
	
	
	<h:outputStylesheet name="jquery.jOrgChart.css" library="css/main"  />
	<h:outputScript library="script/orgChart" name="jquery.jOrgChart.js" target="head"/>
	<p:ajaxStatus  onstart="statusDialog.show();" oncomplete="statusDialog.hide();"  onsuccess="statusDialog.hide(); "/>
	
	<p:dialog id="status" widgetVar="statusDialog"  resizable="false">
	<h:graphicImage value="#{resource['images:ajax-loader.gif']}" />
	</p:dialog>
	
	<p:outputPanel id="arbol" layout="block" autoUpdate="true">
	<p:outputLabel value="Administraci&oacute;n de Unidades Org&aacute;nicas" style="height:20px" styleClass="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"/> 

	<ul id="org" style="display:none">
	
		<li><comp:ComponentUO id="entidad_1" mBean="#{planeamientoMB}" entity="#{planeamientoMB.uoRaiz}" root="#{planeamientoMB.uoRaiz.depende}" styleClass="nodoUO1" update=":panel1"  oncomplete="panel1w.show();"  updateExplorar=":arbol"  onstartExplorar="fadeChart();"   oncompleteExplorar="updateOrgChart();"/>
			<ui:fragment rendered="#{not empty planeamientoMB.uoRaiz.dependienteList}">
				<ul>
					<ui:repeat value="#{planeamientoMB.uoRaiz.dependienteList}" var="uo_dep" varStatus="idx">
					<li>
						<ui:fragment rendered="#{not empty uo_dep.dependienteList}">
						<comp:ComponentUO id="entidad1_" mBean="#{planeamientoMB}" entity="#{uo_dep}" styleClass="nodoUO1" update=":panel1"  oncomplete="panel1w.show();"  updateExplorar=":arbol" oncompleteExplorar="updateOrgChart();" onstartExplorar="fadeChart();"/>
							<ul>
								<ui:repeat value="#{uo_dep.dependienteList}" var="uo_dep1" varStatus="idx1" >
								<li><comp:ComponentUO id="entidad_#{idx1.index}" mBean="#{planeamientoMB}" entity="#{uo_dep1}" styleClass="nodoUO1" update=":panel1" oncomplete="panel1w.show();"  updateExplorar="@form" oncompleteExplorar="updateOrgChart();" onstartExplorar="fadeChart();" /></li>
								</ui:repeat>
							</ul>
						</ui:fragment>	
						<ui:fragment rendered="#{empty uo_dep.dependienteList}">
						<comp:ComponentUO id="entidad3_" mBean="#{planeamientoMB}" entity="#{uo_dep}" styleClass="nodoUO1" update=":panel1" oncomplete="panel1w.show();" updateExplorar="@form" oncompleteExplorar="updateOrgChart();" onstartExplorar="fadeChart();"/>
						</ui:fragment>
						
					</li>
					</ui:repeat>
				</ul>
			</ui:fragment>
					
			</li>
		
	</ul>
	
	</p:outputPanel>	
<div id="chart" class="orgChart" style="display:none"></div>

<p:dialog  appendToBody="true" id="panel1" modal="true" widgetVar="panel1w" hideEffect="fade" width="500" height="250" resizable="false">
<f:facet name="header" >
<h:outputLabel value="Nueva Unidad Org&aacute;nica"  rendered="#{planeamientoMB.uoSelected.idUnidadOrganica==null}"/>
<h:outputLabel value="Editar Unidad Org&aacute;nica" rendered="#{planeamientoMB.uoSelected.idUnidadOrganica!=null}"/>
</f:facet>
<h:form>
<p:growl id="msjUO" showDetail="true"/>
<h:panelGrid columns="2" rendered="#{planeamientoMB.uoSelected!=null}" width="100%">
<h:outputLabel value="Nombre U.O" /><h:inputText value="#{planeamientoMB.uoSelected.nombreUnidad}"  style="width:300px;text-transform:uppercase"  required="true" requiredMessage="Ingrese el nombre" onblur="value=value.toUpperCase()"/>
<h:outputLabel value="Siglas:" /><h:inputText value="#{planeamientoMB.uoSelected.siglas}" required="true" requiredMessage="Ingrese las siglas" onblur="value=value.toUpperCase()" />
<h:outputLabel value="Fecha de Creaci&oacute;n:" /><p:calendar showOn="button" pattern="dd-MM-yyyy" value="#{planeamientoMB.uoSelected.fechaCreacion}" />
<h:outputLabel value="N&uacute;mero de Resoluci&oacute;n:" /><h:inputText value="#{planeamientoMB.uoSelected.resolucion}"  required="true" requiredMessage="Ingrese el numero de Resolucion" onblur="value=value.toUpperCase()"/>
<h:outputLabel value="Depende de:" />
<h:selectOneMenu value="#{planeamientoMB.uoSelected.depende.idUnidadOrganica}" disabled="#{planeamientoMB.uoSelected.idUnidadOrganica==null}">
<f:selectItems value="#{parametroMB.unidadesOrganicasLista}"  var="uo" itemValue="#{uo.idUnidadOrganica}" itemLabel="#{uo.nombreUnidad}"/>
</h:selectOneMenu>
</h:panelGrid>
<br/>
<br/>
<p:separator />
<br/>
<h:panelGrid columns="4" >

<p:commandButton value="Grabar" action="#{planeamientoMB.registrar}" update="msjUO" rendered="#{planeamientoMB.uoSelected.idUnidadOrganica==null}" oncomplete="handleRequestOrg(xhr, status, args,panel1w)"/>
<p:commandButton value="Grabar" action="#{planeamientoMB.actualizar}" update="msjUO" rendered="#{planeamientoMB.uoSelected.idUnidadOrganica!=null}" oncomplete="handleRequestOrg(xhr, status, args,panel1w)"/>
<p:commandButton value="Cancelar" type="button" onclick="panel1w.hide();"/>
<!-- ui:include src="/resources/includes/ajaxStatus.xhtml"/-->
</h:panelGrid>
</h:form>
</p:dialog>




	<script type= "text/javascript">
	//<![CDATA[
	
jQuery(document).ready(function() {
	updateOrgChart();
    });

function updateOrgChart(){
	$("#chart").hide();
	$("#chart").html("");
	
	$("#org").jOrgChart({
        chartElement : '#chart',
        dragAndDrop  : false
    });
	$("#chart").fadeIn("slow");
   // alert("fade");
	//$("#chart").fadeIn("fast");
}


function fadeChart(){
	//$("#chart").fadeOut("slow");
}
function handleRequestOrg(xhr, status, args,component) {  
    if(args.validationFailed || args.notValid) {  
       // alert("validation failed");
       // jQuery('#confirmDialog2').effect("shake", { times:2 }, 100);  
    } else {  
       // alert("borrando");
    	component.hide();  
         updateOrgChart();
    }  
} 
//alert("finisched");

//]]>
</script>
		
		
	</ui:define>

</ui:composition>

</html>